// pages/index/index.scss

.card-container {
  // 外层容器：Y轴居中
  display: flex;
  justify-content: center; // X轴居中（可选）
  align-items: center;     // Y轴居中
  min-height: 50vh;       // 占满视口高度
  padding: 20px;
  box-sizing: border-box;

    /* 半透明背景色 */
  background-color: rgba(255, 255, 255, 0.2);
  
  /* 玻璃模糊效果 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 浏览器兼容 */
  
  /* 可选：添加边框增强效果 */
  border: 1px solid rgba(255, 255, 255, 0.18);
  
  /* 可选：添加阴影增强深度感 */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  border-radius: 5%;
}

.card-rows {
  // 包含所有行的容器
  display: flex;
  flex-direction: column; // 垂直堆叠每一行
  gap: 20px; // 行与行之间的间距
  width: 100%;
  max-width: 100%;
}

.card-row {
  // 每一行：水平排列卡片
  display: flex;
  gap: 10px; // 同一行内卡片的间距
  // 使用 space-between 或 space-around 可让卡片在行内分布
  // justify-content: space-between;
  // 或者让每行内的卡片居中
  justify-content: center;
//   flex-wrap: wrap; // 允许换行（如果屏幕太窄）
}

.card-item {
  // 卡片最小宽度，防止在窄屏上被过度压缩
  min-width: 85px;
  min-height: 130px;
  transform: scale(0.9);
  background-image: url("https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDg_Fo8146L0P8roMDfBTGKgcXQ0CloQACjB0AAgm3mVed2k2bhu728jYE.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // 可选：固定宽度
  // width: 200px;
  // flex: 1; // 卡片等宽伸缩
  position: relative; // 为蒙层定位做准备
  cursor: pointer; // 确保卡片可点击
  
  // 选中状态样式
  &.selected-card {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(33, 150, 243, 0.3); // 半透明蓝色蒙层
      border-radius: inherit;
      z-index: 1;
    }
    
    &::before {
      content: "✔";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
      color: white;
      font-weight: bold;
      z-index: 2;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
  }
  
  &.buyable-card {
          border: 3px solid #4caf50; // 绿色边框
          box-shadow: 0 0 10px rgba(76, 175, 80, 0.5); // 绿色阴影
          transform: scale(1.05); // 稍微放大
          transition: all 0.2s ease-in-out;
          
          &:hover {
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
          }
        }
      
}

// 等级四卡片的特殊样式（无法购买和保留）
.card-item.level-four-card {
  pointer-events: none;
  opacity: 0.7;
}

// 不同等级卡片的尺寸样式
// 等级1卡片（最小）
.card-item.card-level-1 {
  min-width: 85px;
  min-height: 130px;
  transform: scale(0.9);
}

// 等级2卡片
.card-item.card-level-2 {
  min-width: 85px;
  min-height: 130px;
  transform: scale(0.9);
}

// 等级3卡片
.card-item.card-level-3 {
  min-width: 85px;
  min-height: 130px;
  transform: scale(0.9);
}

// 等级4卡片（最大，需要缩小）
.card-item.card-level-4 {
  min-width: 80px;
  min-height: 120px;
  transform: scale(0.85);
}

// 保留卡片的样式
.reserved-card {
  background-image: url("https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDg_Fo8146L0P8roMDfBTGKgcXQ0CloQACjB0AAgm3mVed2k2bhu728jYE.jpg");
  background-color: #cccccc; // 灰色背景
  opacity: 0.8;
  
  // 空的保留卡片格子样式
  &.empty-reserved-card {
    background-color: #888888; // 更深的灰色
    opacity: 0.5;
    border: 1px dashed #666666;
  }
}

// 保留卡片行的特殊样式
.reserved-card-row {
  border-top: 2px dashed #cccccc;
  padding-top: 10px;
  margin-top: 10px;
}

// 响应式：在小屏幕上，让每行的卡片换行显示
@media (max-width: 768px) {
  .card-row {
    flex-wrap: wrap;
    justify-content: center;
  }

  .card-item {
    min-width: 140px;
    flex: 1 1 calc(50% - 6px); // 在小屏幕上，每行最多显示2个
  }
  
  // 在小屏幕上重置不同等级卡片的尺寸
  .card-item.card-level-1,
  .card-item.card-level-2,
  .card-item.card-level-3,
  .card-item.card-level-4 {
    min-width: 120px;
    min-height: 160px;
    transform: scale(1); // 在小屏幕上不缩放
  }
}